<template>
  <div>
    <el-table ref="multipleTableRef" :data="tableData" height="500px" style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="100" />
      <el-table-column label="文件名" width="400">
        <template v-slot="scope">
          <div class="file-item" @click="GetSubFile(scope.row)">
            <!-- 根据 fileType 显示图标 -->
            <img :src="getIcon(scope.row.fileType)" alt="" class="file-icon" />
            <span @click="fileView(scope.row.fileId)">{{ scope.row.fileName }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="修改时间" width="400">
        <template v-slot="scope">
          <span>{{ scope.row.updatedAt || '无' }}</span>
        </template>
      </el-table-column>
      <el-table-column property="fileSize" label="大小" />
    </el-table>
    <!-- 图片预览弹出框 -->
    <el-dialog v-if="previewType == 'image'" v-model="dialogVisible" width="50%">
      <img :src="previewUrl" alt="Image Preview" style="width: 100%;" />
    </el-dialog>

    <!-- 视频预览弹出框 -->
    <el-dialog v-if="previewType == 'video'" v-model="dialogVisible" width="60%">
      <video :src="previewUrl" controls style="width: 100%;"></video>
    </el-dialog>

    <!-- docx预览弹出框 -->
    <el-dialog v-if="previewType == 'docx'" v-model="dialogVisible" width="60%">
      <vue-office-docx :src="previewUrl" style="width: 100%; height:100%" @rendered="viewSuccess" @error="viewError" />
      <div v-show="fileViewStatus">预览失败</div>
    </el-dialog>

    <!-- pdf预览弹出框 -->
    <el-dialog v-if="previewType == 'pdf'" v-model="dialogVisible" width="60%">
      <vue-office-pdf :src="previewUrl" style="width: 100%; height:100%" @rendered="viewSuccess" @error="viewError" />
      <div v-show="fileViewStatus">预览失败</div>
    </el-dialog>

    <!-- excel预览弹出框 -->
    <el-dialog v-if="previewType == 'xlsx'" v-model="dialogVisible" width="60%">
      <vue-office-excel :src="previewUrl" style="width: 100%; height:100%" @rendered="viewSuccess" @error="viewError" />
      <div v-show="fileViewStatus">预览失败</div>
    </el-dialog>

    <!-- 文本文件预览弹出框 -->
    <el-dialog v-if="previewType == 'document'" v-model="dialogVisible" width="60%">
        <iframe :src="previewUrl" scrolling="auto" frameborder="0" id="iframe"></iframe>
    </el-dialog>

    <!-- 其他 -->
    <el-dialog v-if="previewType == 'others'" v-model="dialogVisible" width="60%">
      <div>该文件暂不支持预览</div>
    </el-dialog>

  </div>
</template>

<script setup>
import { ref, toRaw } from "vue";
// 动态引入图标
import txtIcon from '@/assets/icon-image/txt.png';
import imageIcon from '@/assets/icon-image/image.png';
import pdfIcon from '@/assets/icon-image/pdf.png';
import wordIcon from '@/assets/icon-image/word.png';
import pptIcon from '@/assets/icon-image/ppt1.png';
import videoIcon from '@/assets/icon-image/video.png';
import musicIcon from '@/assets/icon-image/music.png';
import noDataIcon from '@/assets/icon-image/no_data.png';
import folderIcon from '@/assets/icon-image/folder.png'
import othersIcon from '@/assets/icon-image/others.png'
import FileView from './FileView.vue';
import VueOfficeDocx from '@vue-office/docx'
import VueOfficePdf from '@vue-office/pdf'

import VueOfficeExcel from '@vue-office/excel'

import { defineProps } from 'vue';
import { getFile, getFileInfoById } from "@/api/file.js";

import { defineEmits } from 'vue';
const fileViewStatus = ref('false')
// 定义 emit
const emit = defineEmits(['upDateTableData']);
const props = defineProps({
  tableData: {
    type: Array,
    default: () => []
  }
});

const fileView = (fileId) => {
  console.log(`文件id:${fileId}`)
  getFileInfoById(fileId)
    .then(res => {
      if (res.data.code == 200) {
        handlePreview(res.data.file)
      } else {
        console.log(res.data.msg)
      }
    }).catch(err => {
      console.log(`服务器异常${err}`)
    })
}
const multipleSelection = ref([]); // 用于保存选中的行

const handleSelectionChange = (val) => {
  multipleSelection.value = val;
  console.log('选中的行:', multipleSelection.value);

};

// 根据 fileType 显示图标
// 文件类型到图标的映射
const iconMap = {
  1: imageIcon,   // 图片文件图标
  2: videoIcon,    // 视频文件图标
  5: pdfIcon,      // PDF 文件图标
  4: musicIcon,    // 音频文件图标
  6: othersIcon,      // PowerPoint 文件图标
};

const dialogVisible = ref(false); // 控制弹出框的显示
const previewUrl = ref(""); // 预览的文件 URL
const previewType = ref(""); // 预览的文件类型（image 或 video）
const getIcon = (fileType) => {
  return fileType ? iconMap[fileType] : folderIcon; // 使用默认图标
};

const handlePreview = (file) => {

  previewUrl.value = file.filePath;

  console.log("预览链接", previewUrl.value);
  switch (file.fileType) {
    case 1: previewType.value = 'image'; break;
    case 2: previewType.value = 'video'; break;
    case 4: previewType.value = 'music'; break;
    case 5: previewType.value = 'document'; break;
    default: previewType.value = 'others'; break;
  }
  if (previewType.value == 'document') {
    let type = file.fileName.substring(file.fileName.lastIndexOf('.') + 1)
    if(type=='docx'||type=='pdf'||type=='xlsx'){
      previewType.value = type
    }
  }
  dialogVisible.value = true;
}

const viewSuccess = () => {
  fileViewStatus.value = false
  console.log('预览成功')
}

const viewError = () => {
  console.log('预览失败')
}

const GetSubFile = (file) => {
  const File = toRaw(file);
  if (File.isFolder === true) {
    console.log("进入子目录", File);
    emit('upDateTableData', File);
  }
}

</script>


<style scoped lang="scss">
.file-icon {
  width: 24px;
  /* 调整图标大小 */
  height: 24px;
  margin-right: 10px;
  /* 图标和文件名之间的间距 */
}

.el-column-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-item :hover {
  /* 悬停时字体颜色变成蓝色 */
  color: #1e90ff;
  cursor: pointer;
}
</style>